<template>
  <div class="group-table">
    <div class="head-group">
      <el-tag
        v-for="(tag, index) in tags"
        :key="index"
        @close="closeTag(tag)"
        closable
      >
        {{ tag.label }}
      </el-tag>
    </div>
    <table
      cellspacing="0"
      rules="all"
      border="1"
      id="Table"
      style="width: 100%; border-collapse: collapse"
    >
      <thead>
        <tr id="HeadTD">
          <th
            v-for="(item, index) in tableColumns"
            :key="index"
            :id="'th_' + item.prop"
            @mousedown="handleMouseDown($event, item, index)"
          >
            {{ item.label }}
          </th>
        </tr>
      </thead>
      <tbody id="ContTD">
        <tr v-for="(trItem, trIndex) in tableList" :key="trIndex">
          <td v-for="(tdItem, tdIndex) in trItem" :key="tdIndex" :id="'td_' + tdIndex">
            {{ tdItem }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { deepClone } from "@/utils/index";
import { tableColumns, tableList } from "./data.js";
export default {
  data() {
    return {
      tableColumns: tableColumns,
      tableList: tableList,
      settings: {
        groupby: "", // 要收起的列index，字符串，
      },
      headers: [],
      rows: [],
      curValues: [],
      preValues: [],
      // 标签 {label:展示的label值，prop: 对应表格的prop，index: 当前行对应的index，}
      tags: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.$nextTick(() => {
        // this.memberList = deepClone(this.processDefinition); // 备份数据
        this.drawTable({});
      });
    },
    /**
     * 利用节点化碎片修改表格
     * params: {
     *  item: {label, prop}, // 表格的label和给列表传值的prop,
     *  index: 0, 1,.. // 当前要移动的对象， 一次只有一个
     * }
     */
    drawTable(obj) {
      this.$nextTick(() => {
        let curValues = deepClone(this.curValues);
        let preValues = deepClone(this.preValues);
        let Table = document.getElementById("Table");
        let headTD = document.getElementById("HeadTD");
        let contTD = document.getElementById("ContTD");
        let headList = headTD.getElementsByTagName("th");
        let contTrList = contTD.getElementsByTagName("tr");
        let fragment = document.createDocumentFragment();
        let isEmptyObj = Object.keys(obj).length !== 0;

        // 点击之后要添加一个空格，作为放分组的位置
        if (!document.getElementById("th_space") && isEmptyObj) {
          let th = document.createElement("th");
          th.colSpan = this.tags.length;
          th.className = "left_space";
          th.id = "th_space";
          headList[0].parentNode.insertBefore(th, headList[0]);
        }
        // 移除要分组的列
        if (headList.length > 0 && isEmptyObj) {
          document.getElementById("th_" + obj.item.prop).remove();
          // document.getElementById("td_" + obj.item.prop).remove();
        }
        // 移除要分组的数据，并且转化成整行
        console.log(contTrList, "contTrList");
        if (contTrList.length > 0 && isEmptyObj) {
          for (let i = 0; i < contTrList.length; i++) {
            curValues[i] = contTrList[i].childNodes.item(obj.index).textContent;
            let precategory = "";
            if (!contTrList[i].children[0].id !== 'td_space' && isEmptyObj) {
              console.log(contTrList[i], 'hhh');
              let td = document.createElement("td");
              td.colSpan = this.tags.length;
              td.className = "left_space";
              td.id = "td_space";
              contTrList[i].insertBefore(td, contTrList[i].children[0]);
            }

            if (!precategory) {
              // 添加第一层级
            }
          }
        }

        // for (let i = 0; i < 20; i++) {
        //   let li = document.createElement("li");
        //   li.innerHTML = "index: " + i;
        //   fragment.appendChild(li);nodeValue
        // }
        // Table.appendChild(fragment);
      });
    },
    sortColumn() {},
    // 鼠标点击下去
    handleMouseDown(e, item, index) {
      console.log(e, item, index, "鼠标点击下去");
      this.drawTable({ item, index });
      this.tags.push({
        label: item.label,
        prop: item.prop,
        index: index,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.group-table {
  position: relative;
  .btns {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .head-group {
    display: flex;
    height: 35px;
    line-height: 35px;
    background-color: #e7f0f4;
  }
  #HeadTD {
    cursor: pointer;
  }

  .minus {
    height: 9px;
    float: left;
    width: 9px;
    cursor: pointer;
    cursor: pointer;
    background-image: url(./style/images/minus.gif);
  }

  .plus {
    height: 9px;
    width: 9px;
    float: left;
    border: 0;
    cursor: pointer;
    background-image: url(./style/images/plus.gif);
  }
  .blank {
    width: 9px;
    height: 9px;
    float: left;
    border: 0;
    background-image: url(./style/images/blank.gif);
  }

  .left_space {
    border-width: 0;
    border: 0;
    width: 20px;
    border-right-style: none;
  }
}
</style>